<template>
  <view class="con">
    <image src="@/static/logo.png" class="logo" />
    <view class="btn-group">
      <button class="authorized-btn" @tap="handleWechatLogin">
        微信一键登录
      </button>
      <button class="to-idx-btn" @tap="toIndex">回到首页</button>
    </view>

    <!-- 登录弹窗 -->
    <view class="modal-mask" v-if="showModal"></view>
    <view class="modal-dialog" v-if="showModal">
      <view class="modal-content">
        <view><image src="../static/show.png" class="show"></image></view>
        <view class="modal-title">绑定手机号</view>
        <view class="modal-tip">请先绑定手机号在进行此操作</view>
        <button open-type="getPhoneNumber" class="bind-btn">
          <image src="../static/showWx.png" class="iconWx"></image>
          微信用户一键绑定
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import http from "@/utils/http";

// 控制模态框显示
const showModal = ref(false);

// 保存 login 返回的 code
const loginCode = ref("");

/**
 * 第一步：获取微信登录 code
 */
const getWechatCode = () => {
  return new Promise((resolve, reject) => {
    uni.login({
      provider: "weixin",
      success: (res) => {
        if (res.code) {
          loginCode.value = res.code;
          resolve(res.code);
        } else {
          uni.showToast({ title: "获取 code 失败", icon: "none" });
          reject();
        }
      },
      fail: (err) => {
        uni.showToast({ title: "微信登录失败", icon: "none" });
        reject();
      },
    });
  });
};

/**
 * 第二步：用户点击按钮触发获取用户信息
 */
const handleWechatLogin = async () => {
  try {
    // 先获取 code
    const code = await getWechatCode();

    // 弹出提示框，引导用户点击确认来获取用户信息
    uni.showModal({
      title: "授权提示",
      content: "需要获取您的用户信息用于完善会员资料",
      success: (res) => {
        if (res.confirm) {
          // 用户点击确认后获取用户信息
          uni.getUserProfile({
            desc: "用于完善会员资料", // 必填
            success: (profileRes) => {
              const { nickName, avatarUrl } = profileRes.userInfo;

              console.log("获取用户信息成功:", profileRes);

              // 发送 code 和用户信息到后端
              http
                .request({
                  url: "/wechat/login",
                  method: "post",
                  data: {
                    code: code,
                    nickName: nickName,
                    avatarUrl: avatarUrl,
                  },
                })
                .then(({ data }) => {
                  http.loginSuccess(data, () => {
                    uni.showToast({
                      title: "登录成功",
                      icon: "none",
                      complete: () => {
                        setTimeout(() => {
                          wx.switchTab({ url: "/pages/index/index" });
                        }, 1000);
                      },
                    });
                  });
                })
                .catch((error) => {
                  uni.showToast({ title: "登录失败", icon: "none" });
                });
            },
            fail: (err) => {
              console.error("获取用户信息失败:", err);
              uni.showToast({ title: "用户拒绝授权", icon: "none" });
            },
          });
        } else if (res.cancel) {
          uni.showToast({ title: "用户取消授权", icon: "none" });
        }
      },
    });
  } catch (error) {
    console.error("登录流程异常:", error);
  }
};

/**
 * 回到首页
 */
const toIndex = () => {
  wx.switchTab({ url: "/pages/index/index" });
};

/**
 * 阻止触摸移动
 */
const preventTouchMove = () => {};

/**
 * 获取手机号
 */
const getPhoneNumber = (e) => {
  console.log("获取手机号:", e.detail);
  // 处理获取手机号的逻辑
};
</script>

<style scoped lang="scss">
.con {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  box-sizing: border-box;

  .logo {
    width: 200rpx;
    height: 200rpx;
    margin: 100rpx 0;
  }

  .btn-group {
    width: 100%;

    button {
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      margin: 30rpx 0;
      font-size: 32rpx;

      &::after {
        border: none;
      }
    }

    .authorized-btn {
      background: #09bb07;
      color: white;
    }

    .to-idx-btn {
      background: #f0f0f0;
      color: #666;
    }
  }

  .modal-mask {
    background: rgba(0, 0, 0, 0.5);
  }

  .modal-dialog {
    width: 80%;
    border-radius: 20rpx;

    .modal-content {
      padding: 40rpx;

      .modal-title {
        font-size: 36rpx;
        margin: 20rpx 0;
      }

      .modal-tip {
        color: #888;
        margin-bottom: 40rpx;
      }

      .show {
        width: 120rpx;
        height: 120rpx;
      }

      .bind-btn {
        background: #09bb07;
        color: white;
        height: 80rpx;
        line-height: 80rpx;

        .iconWx {
          width: 40rpx;
          height: 40rpx;
          vertical-align: middle;
          margin-right: 10rpx;
        }
      }
    }
  }
}
</style>
